<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程题目列表</title>
    <link rel="stylesheet" href="../static/css/show_ques_list.css">
</head>
<body>
    <nav>
        <div class="nav-items">
            <span class="nav-item">数组 1837</span>
            <span class="nav-item">字符串 781</span>
            <span class="nav-item">哈希表 645</span>
            <span class="nav-item">动态规划 582</span>
            <span class="nav-item">数学 566</span>
            <span class="nav-item">排序 444</span>
            <span class="nav-item">贪心 375</span>
            <span class="nav-item">深度优先搜索 展开 ▼</span>
        </div>
    </nav>
    <div class="sub-nav">
        <button class="sub-nav-item active">全部题目</button>
        <button class="sub-nav-item">算法</button>
        <button class="sub-nav-item">数据库</button>
        <button class="sub-nav-item">Shell</button>
        <button class="sub-nav-item">多线程</button>
        <button class="sub-nav-item">JavaScript</button>
    </div>
    <div class="filter-bar">
        <select>
            <param>难度</param>
        </select>
        <select>
            <param>状态</param>
        </select>
        <select>
            <param>标签</param>
        </select>
        <select>
            <param>排序</param>
        </select>
        <input type="text" placeholder="搜索题目、标签、题号">
        <button class="icon-button">⚙</button>
        <button class="icon-button">↻</button>
        <button class="random-button">随机一题</button>
    </div>
    <table id="problem-table">
        <thead>
            <tr>
                <th>状态</th>
                <th>题号</th>
                <th>题目</th>
                <th>难度</th>             
            </tr>
        </thead>
        <tbody>
            <!-- 表格内容将由JavaScript动态生成 -->
        </tbody>
    </table>
    <div class="pagination" id="pagination">
        <!-- 分页按钮将由 JavaScript 动态生成 -->
    </div>
    <script src="../static/js/show_ques_list.js"></script>
</body>
</html>